<template>
  <el-col :span="4">
    <el-form-item label="端">
      <!--    <el-cascader  :style="style" v-model="modelValue.nodeId"  ref="cascaderNode"    @change="nodeChange" :options="nodeOptions"/>-->
      <el-select v-model="modelValue.nodeId" class="m-2" clearable @clear="clearPassage" @change="nodeChange">
        <el-option

            v-for="item in nodeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="通道">
      <!--    <el-cascader :style="style" v-model="modelValue.passageCode"  ref="cascaderPassage" :option="passageOptions"  @change="passageChange" />-->
      <el-select v-model="modelValue.passage" class="m-2" clearable @change="passageChange">
        <el-option
            v-for="item in passageOptions"
            :key="item.value"
            :label="item.label"
            :value="item"
        />
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="7">
    <el-form-item label="点位">
      <!--    <el-cascader :style="style" v-model="modelValue.pointId"  ref="cascaderPoint" :option="pointOptions"  @change="pointChange" />-->
      <el-select ref="cascaderPoint" style="width:100%" :multiple="multiple||false" collapse-tags filterable
                 v-model="modelValue.point" class="m-4" :option="pointOptions"
                 @change="pointChange">
        <el-option
            @click.native="sort"
            v-for="item in filter()"
            :key="item.value"
            :label="item.value+'('+item.label+')'"
            :value="item"
        />
      </el-select>
    </el-form-item>
  </el-col>
</template>

<script setup>
import {
  passageOptions,
  nodeOptions,
  pointOptions,
  queryPassageByNodeId,
  queryPointBypassageCode,
  getNodeList,
  nodeId,
  passageCode
} from './index'

import {ref} from "vue";

const cascaderNode = ref(null)
const cascaderPassage = ref(null)
defineExpose({
  clear
})


const props = defineProps({
  /* 配置项 */
  objMap: {
    type: Object,
    default: () => {
      return {}
    }
  },
  nodeOptions: {
    type: Array,
    default: () => []
  },
  passageOptions: {
    type: Array,
    default: () => []
  },
  pointOptions: {
    type: Array,
    default: () => []
  },
  nodeId: {
    type: [String, Number],
    default: 0
  },
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  },
  multiple: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /* 配置项 */
  style: {
    type: String
  },
  /* 选中项 */
  selected: {
    type: Array,
    default: () => []
  }
})


const emit = defineEmits(['update:modelValue']);
onMounted(() => {
  getNodeList(props.nodeId);
  queryPassageByNodeId(props.modelValue.nodeId);
  // queryPointBypassageCode();
})

function filter() {
  //选中的不在下拉中展示
  return pointOptions.value.filter((item) => {
    let flag = true;
    props.selected && props.selected.map(item1 => {
      //加上通道判断
      if (item1.value == item.value&&props.modelValue.passage.passageId==item1.passageId) {
        flag = false;
      }
    })
    return flag;
  })
}

function clear() {
  emit('update:modelValue', {nodeId: undefined, passageCode: undefined})
}

function nodeChange(e) {
  queryPassageByNodeId(e);
  emit('update:modelValue', {
    nodeId: e,
    passageCode: null,
    pointCode: null,
    point: null,
    pointOptions: null,
    passage: null
  })
}

function passageChange(e) {
  queryPointBypassageCode(e.passageId)
  emit('update:modelValue', {
    passage: e,
    passageCode: e.value,
    nodeId: props.modelValue.nodeId,
    pointCode: null,
    point: null,
    pointOptions: null
  })
}

function pointChange(e) {
  emit('update:modelValue', {
    point: e,
    pointCode: e.value,
    nodeId: props.modelValue.nodeId,
    passage: props.modelValue.passage,
    passageCode: props.modelValue.passageCode
  })
}

function sort(e) {
  // console.log('..........',props.modelValue.point)
  // pointOptions.value.sort((a, b) => {
  //   return a - b
  // })
  pointOptions.value = sortByExistence(pointOptions.value, props.modelValue.point)
}
function clearPassage(){
 passageOptions.value = [];
}
/**
 * 存在的排前面
 * @param arr1
 * @param arr2
 * @returns {*}
 */
function sortByExistence(arr1, arr2) {
  // const mergedArray = arr1.concat(arr2);
  arr1.sort((a, b) => {
    const aExistsInArr2 = arr2.includes(a);
    const bExistsInArr2 = arr2.includes(b);

    if (aExistsInArr2 && !bExistsInArr2) {
      return -1;
    } else if (!aExistsInArr2 && bExistsInArr2) {
      return 1;
    } else {
      return 0;
    }
  });

  return arr1;
}
</script>

<style lang='scss' scoped>

</style>